<#include "/common/taglibs.ftl" />
<@menu code='profile.avatar'/>
<title><@spring.message code="my.profile" /></title>
<div class="row">
    <div class="col-xl-3 col-lg-4">
    <#include "/personal/profile/sidebar.ftl" />
    </div>
    <div class="col-xl-9 col-lg-8">
        <div class="m-portlet m-portlet--full-height m-portlet--tabs  ">
            <div class="m-portlet__head">
                <div class="m-portlet__head-tools">
                <#include "/personal/profile/nav.ftl" />
                </div>
                <div class="m-portlet__head-tools">
                <#include "/personal/profile/actions.ftl" />
                </div>
            </div>
            <div class="tab-content">
                <div class="tab-pane active">
                    <form id="avatarForm" method="POST" class="m-form m-form--fit m-form--label-align-right" enctype="multipart/form-data">
                        <div class="m-portlet__body">
                            <div class="m-form__content">
                                <@showMessage />
                                <#include "/common/taglibs/validationMessage.ftl">
                            </div>
                            <div class="form-group m-form__group row">
                                <div id="kv-avatar-errors" class="center-block" style="width:800px;display:none"></div>
                                <div class="kv-avatar center-block text-center" style="width:200px">
                                    <input id="avatar" name="file" type="file" class="file-loading">
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<page-plugin-style>
<#include "/common/plugins/bootstrap.fileupload.style.ftl" />
</page-plugin-style>
<page-plugin-script>
<#include "/common/plugins/bootstrap.fileupload.script.ftl" />
</page-plugin-script>
<page-style>
<!-- some CSS styling changes and overrides -->
<style>
<#include "/personal/profile/profile_style.ftl" />
.kv-avatar .file-preview-frame,.kv-avatar .file-preview-frame:hover {
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    text-align: center;
}
.kv-avatar .file-input {
    display: table-cell;
    max-width: 220px;
}
.avatar-buttons{
    /* text-align: center; */
}
.page-content {
    background: #eef1f5;
}
</style>
</page-style>
<page-script>
    <script>
        function getAvatar() {
            var avatar = '${m.avatar!}';
            var gender = '${m.gender!}';
            if (avatar && avatar.length > 0) {
                return '${resource}/' + avatar;
            }
            if (gender && gender.length > 0) {
                return "${static}${urls.getForLookupPath('/img/user-' + gender + '-icon.png')}"
            }
            return '';
        }

        jQuery(document).ready(function () {
            var avatar = getAvatar();
            var btnCust = '<button id="submitAvatarBtn" type="button" class="btn m-btn btn-info"><i class="glyphicon glyphicon-ok"></i> <span class="hidden-xs"><@spring.message code="button.submit"/></span></button>';
            $("#avatar").fileinput({
                overwriteInitial: true,
                maxFileSize: 1500,
                showClose: false,
                showCaption: false,
                showBrowse: false,
                browseOnZoneClick: true,
                removeLabel: '<@spring.message code="button.remove"/>',
                removeIcon: '<i class="glyphicon glyphicon-remove"></i>',
                removeTitle: '<@spring.message code="profile.avatar.cancel.reset.changes"/>',
                elErrorContainer: '#kv-avatar-errors',
                msgErrorClass: 'alert alert-block alert-danger',
                defaultPreviewContent: '<img src="' + avatar + '" style="width:200px" /><h6 class="text-muted"><@spring.message code="click.to.select"/></h6>',
                layoutTemplates: {main2: '{preview} <div class="avatar-buttons">' + btnCust + ' {remove} {browse} </div>'},
                allowedFileExtensions: ["jpg", "png", "gif"]
            });
            $("#submitAvatarBtn").click(function () {
                if ($("#avatar").val() != '') {
                    $("#avatarForm").submit();
                }
            });
        });
    </script>
</page-script>